<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>校园生活助手 - 用户注册</title>
    <!-- 引入Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- 引入Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- 引入自定义CSS -->
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
    
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
        
        :root {
            --primary-color: #165DFF;
            --secondary-color: #0A2463;
            --accent-color: #3E92CC;
            --success-color: #22C55E;
            --warning-color: #F59E0B;
            --error-color: #EF4444;
            --text-color: #333;
            --text-light: #666;
            --bg-color: #F8F9FA;
            --card-bg: #fff;
            --border-radius: 12px;
            --box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            --transition: all 0.3s ease;
        }
        
        body {
            font-family: 'Poppins', sans-serif;
            background-color: var(--bg-color);
            color: var(--text-color);
            line-height: 1.6;
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow-x: hidden;
        }
        
        body::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, rgba(22, 93, 255, 0.05), rgba(62, 146, 204, 0.05));
            z-index: -1;
        }
        
        .register-container {
            display: flex;
            width: 900px;
            max-width: 90%;
            background-color: var(--card-bg);
            border-radius: var(--border-radius);
            box-shadow: var(--box-shadow);
            overflow: hidden;
            animation: slideIn 0.5s ease-out;
        }
        
        @keyframes slideIn {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .register-banner {
            flex: 1;
            background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
            color: white;
            padding: 40px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            position: relative;
            overflow: hidden;
        }
        
        .register-banner::before {
            content: '';
            position: absolute;
            top: -50%;
            right: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(255, 255, 255, 0.1), transparent 70%);
            transform: rotate(45deg);
        }
        
        .register-banner h2 {
            font-size: 2.5rem;
            font-weight: 700;
            margin-bottom: 1rem;
            position: relative;
            z-index: 1;
        }
        
        .register-banner p {
            font-size: 1.1rem;
            opacity: 0.9;
            margin-bottom: 2rem;
            position: relative;
            z-index: 1;
        }
        
        .benefit-list {
            position: relative;
            z-index: 1;
        }
        
        .benefit-item {
            display: flex;
            align-items: flex-start;
            margin-bottom: 1.2rem;
        }
        
        .benefit-item i {
            font-size: 1.2rem;
            margin-right: 1rem;
            margin-top: 0.2rem;
            color: rgba(255, 255, 255, 0.9);
        }
        
        .benefit-item span {
            opacity: 0.9;
        }
        
        .register-form-section {
            flex: 1;
            padding: 40px;
            display: flex;
            flex-direction: column;
            overflow-y: auto;
            max-height: 100vh;
        }
        
        .register-header {
            text-align: center;
            margin-bottom: 2.5rem;
        }
        
        .logo {
            display: inline-block;
            margin-bottom: 1.5rem;
        }
        
        .logo img {
            width: 80px;
            height: 80px;
            object-fit: contain;
        }
        
        .register-header h1 {
            font-size: 1.8rem;
            font-weight: 600;
            color: var(--secondary-color);
            margin-bottom: 0.5rem;
        }
        
        .register-header p {
            color: var(--text-light);
            font-size: 0.95rem;
        }
        
        .form-group {
            margin-bottom: 1.5rem;
            position: relative;
        }
        
        .form-label {
            display: block;
            margin-bottom: 0.5rem;
            font-weight: 500;
            color: var(--text-color);
            font-size: 0.95rem;
        }
        
        .form-control {
            width: 100%;
            padding: 12px 15px;
            border: 2px solid #E5E7EB;
            border-radius: 8px;
            font-size: 1rem;
            transition: var(--transition);
            background-color: #fff;
        }
        
        .form-control:focus {
            border-color: var(--primary-color);
            outline: none;
            box-shadow: 0 0 0 3px rgba(22, 93, 255, 0.1);
        }
        
        .form-control::placeholder {
            color: #A0AEC0;
        }
        
        .input-icon {
            position: absolute;
            left: 15px;
            top: 50%;
            transform: translateY(-50%);
            color: #A0AEC0;
            font-size: 1rem;
            z-index: 1;
        }
        
        .input-with-icon .form-control {
            padding-left: 45px;
        }
        
        .password-toggle {
            position: absolute;
            right: 15px;
            top: 50%;
            transform: translateY(-50%);
            cursor: pointer;
            color: #A0AEC0;
            font-size: 1.1rem;
            z-index: 1;
            transition: var(--transition);
        }
        
        .password-toggle:hover {
            color: var(--primary-color);
        }
        
        .form-check {
            margin-bottom: 1.5rem;
        }
        
        .form-check-input {
            margin-right: 0.5rem;
            width: 18px;
            height: 18px;
            cursor: pointer;
        }
        
        .form-check-label {
            font-size: 0.9rem;
            color: var(--text-light);
            cursor: pointer;
            user-select: none;
        }
        
        .form-check-label a {
            color: var(--primary-color);
            text-decoration: none;
            transition: var(--transition);
        }
        
        .form-check-label a:hover {
            text-decoration: underline;
            color: var(--secondary-color);
        }
        
        .btn-register {
            width: 100%;
            padding: 12px;
            background-color: var(--primary-color);
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            transition: var(--transition);
            margin-bottom: 1.5rem;
            position: relative;
            overflow: hidden;
        }
        
        .btn-register:hover {
            background-color: var(--secondary-color);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(22, 93, 255, 0.3);
        }
        
        .btn-register:active {
            transform: translateY(0);
        }
        
        .btn-register::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 300px;
            height: 300px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            transform: translate(-50%, -50%) scale(0);
            transition: transform 0.5s ease;
        }
        
        .btn-register:hover::before {
            transform: translate(-50%, -50%) scale(1);
        }
        
        .alternative-register {
            text-align: center;
            margin-bottom: 1.5rem;
        }
        
        .alternative-register p {
            position: relative;
            display: inline-block;
            margin: 0;
            color: var(--text-light);
            font-size: 0.9rem;
        }
        
        .alternative-register p::before,
        .alternative-register p::after {
            content: '';
            position: absolute;
            top: 50%;
            width: 80px;
            height: 1px;
            background-color: #E5E7EB;
        }
        
        .alternative-register p::before {
            right: 100%;
            margin-right: 15px;
        }
        
        .alternative-register p::after {
            left: 100%;
            margin-left: 15px;
        }
        
        .social-buttons {
            display: flex;
            justify-content: center;
            gap: 1rem;
            margin-bottom: 2rem;
        }
        
        .social-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 45px;
            height: 45px;
            border: 1px solid #E5E7EB;
            border-radius: 50%;
            background-color: white;
            cursor: pointer;
            transition: var(--transition);
            font-size: 1.1rem;
            color: var(--text-color);
        }
        
        .social-btn:hover {
            background-color: var(--primary-color);
            color: white;
            border-color: var(--primary-color);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(22, 93, 255, 0.2);
        }
        
        .login-link {
            text-align: center;
            font-size: 0.9rem;
            color: var(--text-light);
        }
        
        .login-link a {
            color: var(--primary-color);
            font-weight: 500;
            text-decoration: none;
            transition: var(--transition);
        }
        
        .login-link a:hover {
            text-decoration: underline;
            color: var(--secondary-color);
        }
        
        .error-message {
            background-color: #FEE2E2;
            color: #B91C1C;
            padding: 12px 15px;
            border-radius: 8px;
            margin-bottom: 1.5rem;
            display: flex;
            align-items: center;
            font-size: 0.9rem;
            opacity: 0;
            transform: translateY(-10px);
            transition: opacity 0.3s ease, transform 0.3s ease;
        }
        
        .error-message.show {
            opacity: 1;
            transform: translateY(0);
        }
        
        .error-message i {
            margin-right: 10px;
            font-size: 1.1rem;
        }
        
        .success-message {
            background-color: #DCFCE7;
            color: #166534;
            padding: 12px 15px;
            border-radius: 8px;
            margin-bottom: 1.5rem;
            display: flex;
            align-items: center;
            font-size: 0.9rem;
            opacity: 0;
            transform: translateY(-10px);
            transition: opacity 0.3s ease, transform 0.3s ease;
        }
        
        .success-message.show {
            opacity: 1;
            transform: translateY(0);
        }
        
        .success-message i {
            margin-right: 10px;
            font-size: 1.1rem;
        }
        
        .form-row {
            display: flex;
            gap: 1rem;
            margin-bottom: 1.5rem;
        }
        
        .form-row .form-group {
            flex: 1;
            margin-bottom: 0;
        }
        
        .form-select {
            width: 100%;
            padding: 12px 15px;
            border: 2px solid #E5E7EB;
            border-radius: 8px;
            font-size: 1rem;
            transition: var(--transition);
            background-color: #fff;
            appearance: none;
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
            background-position: right 1rem center;
            background-repeat: no-repeat;
            background-size: 1.5em 1.5em;
            padding-right: 3rem;
        }
        
        .form-select:focus {
            border-color: var(--primary-color);
            outline: none;
            box-shadow: 0 0 0 3px rgba(22, 93, 255, 0.1);
        }
        
        /* 响应式设计 */
        @media (max-width: 768px) {
            .register-container {
                flex-direction: column;
                max-width: 100%;
                margin: 20px;
            }
            
            .register-banner {
                padding: 30px 20px;
                text-align: center;
            }
            
            .register-banner h2 {
                font-size: 2rem;
            }
            
            .benefit-item {
                justify-content: center;
            }
            
            .register-form-section {
                padding: 30px 20px;
            }
            
            .alternative-register p::before,
            .alternative-register p::after {
                width: 40px;
            }
            
            .form-row {
                flex-direction: column;
                gap: 0;
            }
        }
        
        @media (max-width: 480px) {
            body {
                align-items: flex-start;
                padding-top: 20px;
                height: auto;
                min-height: 100vh;
            }
            
            .register-banner h2 {
                font-size: 1.8rem;
            }
            
            .register-banner p {
                font-size: 1rem;
            }
            
            .register-header h1 {
                font-size: 1.6rem;
            }
            
            .alternative-register p::before,
            .alternative-register p::after {
                width: 20px;
            }
        }
        
        /* 加载动画 */
        .loader {
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 2px solid rgba(255, 255, 255, 0.3);
            border-radius: 50%;
            border-top-color: white;
            animation: spin 1s ease-in-out infinite;
            margin-left: 8px;
            vertical-align: middle;
        }
        
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
        
        .btn-register.loading .btn-text {
            visibility: hidden;
        }
        
        .btn-register.loading .loader {
            display: inline-block;
        }
        
        /* 密码强度指示器 */
        .password-strength {
            margin-top: 0.5rem;
            height: 6px;
            border-radius: 3px;
            background-color: #E5E7EB;
            overflow: hidden;
            display: none;
        }
        
        .password-strength.visible {
            display: block;
        }
        
        .password-strength-bar {
            height: 100%;
            border-radius: 3px;
            transition: width 0.3s ease, background-color 0.3s ease;
            width: 0;
            background-color: #E5E7EB;
        }
        
        .password-strength-bar.weak {
            width: 33%;
            background-color: var(--error-color);
        }
        
        .password-strength-bar.medium {
            width: 66%;
            background-color: var(--warning-color);
        }
        
        .password-strength-bar.strong {
            width: 100%;
            background-color: var(--success-color);
        }
        
        .password-strength-text {
            margin-top: 0.3rem;
            font-size: 0.8rem;
            color: var(--text-light);
            display: none;
        }
        
        .password-strength-text.visible {
            display: block;
        }
        
        .password-strength-text.weak {
            color: var(--error-color);
        }
        
        .password-strength-text.medium {
            color: var(--warning-color);
        }
        
        .password-strength-text.strong {
            color: var(--success-color);
        }
        
        /* 验证码输入框 */
        .captcha-container {
            display: flex;
            gap: 1rem;
            align-items: center;
        }
        
        .captcha-container .form-control {
            flex: 1;
        }
        
        .captcha-image {
            width: 120px;
            height: 45px;
            border-radius: 8px;
            cursor: pointer;
            transition: var(--transition);
        }
        
        .captcha-image:hover {
            transform: scale(1.02);
        }
        
        .captcha-refresh {
            color: var(--primary-color);
            cursor: pointer;
            font-size: 1.2rem;
            transition: var(--transition);
        }
        
        .captcha-refresh:hover {
            color: var(--secondary-color);
            transform: rotate(90deg);
        }
    </style>
</head>
<body>
    <div class="register-container">
        <!-- 左侧横幅 -->
        <div class="register-banner">
            <h2>加入校园生活助手</h2>
            <p>一站式管理学习与生活，让校园生活更便捷、更智能</p>
            <div class="benefit-list">
                <div class="benefit-item">
                    <i class="fa fa-calendar-check"></i>
                    <span>智能课程管理与出勤跟踪</span>
                </div>
                <div class="benefit-item">
                    <i class="fa fa-book"></i>
                    <span>在线学习资料与作业提交</span>
                </div>
                <div class="benefit-item">
                    <i class="fa fa-comments"></i>
                    <span>师生互动与校园社区交流</span>
                </div>
                <div class="benefit-item">
                    <i class="fa fa-bar-chart"></i>
                    <span>学习成绩与进度分析</span>
                </div>
                <div class="benefit-item">
                    <i class="fa fa-users"></i>
                    <span>拓展社交圈，认识更多同学</span>
                </div>
            </div>
        </div>
        
        <!-- 右侧注册表单 -->
        <div class="register-form-section">
            <div class="register-header">
                <div class="logo">
                    <i class="fa fa-graduation-cap" style="font-size: 3.5rem; color: var(--primary-color);"></i>
                </div>
                <h1>创建新账号</h1>
                <p>填写以下信息完成注册</p>
            </div>
            
            <!-- 消息提示区域 -->
            {% with messages = get_flashed_messages(with_categories=true) %}
                {% if messages %}
                    {% for category, message in messages %}
                        <div class="alert alert-{{ category }} fade-in mb-4" role="alert">
                            <button type="button" class="close" data-bs-dismiss="alert" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                            {{ message }}
                        </div>
                    {% endfor %}
                {% endif %}
            {% endwith %}
            
            <!-- 错误消息区域 -->
            <div class="error-message" id="error-message" style="display: none;">
                <i class="fa fa-exclamation-circle"></i>
                <span id="error-text">注册信息有误，请检查并重新提交</span>
            </div>
            
            <!-- 成功消息区域 -->
            <div class="success-message" id="success-message" style="display: none;">
                <i class="fa fa-check-circle"></i>
                <span id="success-text">注册成功！即将跳转到登录页面...</span>
            </div>
            
            <!-- 注册表单 -->
            <form method="POST" action="{{ url_for('register') }}" id="register-form">
                {{ form.hidden_tag() }}
                
                <!-- 用户名 -->
                <div class="form-group input-with-icon">
                    <label for="username" class="form-label">用户名</label>
                    <i class="fa fa-user input-icon"></i>
                    {{ form.username(class="form-control", placeholder="请设置用户名，2-20个字符", required=True) }}
                    {% if form.username.errors %}
                        <div class="text-danger mt-1">
                            {% for error in form.username.errors %}
                                <small>{{ error }}</small>
                            {% endfor %}
                        </div>
                    {% endif %}
                </div>
                
                <!-- 邮箱 -->
                <div class="form-group input-with-icon">
                    <label for="email" class="form-label">邮箱地址</label>
                    <i class="fa fa-envelope input-icon"></i>
                    {{ form.email(class="form-control", placeholder="请输入邮箱地址", required=True) }}
                    {% if form.email.errors %}
                        <div class="text-danger mt-1">
                            {% for error in form.email.errors %}
                                <small>{{ error }}</small>
                            {% endfor %}
                        </div>
                    {% endif %}
                </div>
                
                <!-- 手机号 -->
                <div class="form-group input-with-icon">
                    <label for="phone" class="form-label">手机号码</label>
                    <i class="fa fa-mobile input-icon"></i>
                    {{ form.phone(class="form-control", placeholder="请输入手机号码", required=True) }}
                    {% if form.phone.errors %}
                        <div class="text-danger mt-1">
                            {% for error in form.phone.errors %}
                                <small>{{ error }}</small>
                            {% endfor %}
                        </div>
                    {% endif %}
                </div>
                
                <!-- 密码 -->
                <div class="form-group input-with-icon">
                    <label for="password" class="form-label">密码</label>
                    <i class="fa fa-lock input-icon"></i>
                    {{ form.password(class="form-control", placeholder="请设置密码，至少8位字符", required=True) }}
                    <i class="fa fa-eye-slash password-toggle" id="toggle-password"></i>
                    {% if form.password.errors %}
                        <div class="text-danger mt-1">
                            {% for error in form.password.errors %}
                                <small>{{ error }}</small>
                            {% endfor %}
                        </div>
                    {% endif %}
                    <!-- 密码强度指示器 -->
                    <div class="password-strength" id="password-strength">
                        <div class="password-strength-bar" id="password-strength-bar"></div>
                    </div>
                    <div class="password-strength-text" id="password-strength-text">密码强度: 弱</div>
                </div>
                
                <!-- 确认密码 -->
                <div class="form-group input-with-icon">
                    <label for="confirm_password" class="form-label">确认密码</label>
                    <i class="fa fa-lock input-icon"></i>
                    {{ form.confirm_password(class="form-control", placeholder="请再次输入密码", required=True) }}
                    {% if form.confirm_password.errors %}
                        <div class="text-danger mt-1">
                            {% for error in form.confirm_password.errors %}
                                <small>{{ error }}</small>
                            {% endfor %}
                        </div>
                    {% endif %}
                </div>
                
                <!-- 验证码 -->
                <div class="form-group">
                    <label for="captcha" class="form-label">验证码</label>
                    <div class="captcha-container">
                        {{ form.captcha(class="form-control", placeholder="请输入验证码", required=True) }}
                        <img src="{{ url_for('captcha') }}" alt="验证码" class="captcha-image" id="captcha-image">
                        <i class="fa fa-refresh captcha-refresh" id="captcha-refresh"></i>
                    </div>
                    {% if form.captcha.errors %}
                        <div class="text-danger mt-1">
                            {% for error in form.captcha.errors %}
                                <small>{{ error }}</small>
                            {% endfor %}
                        </div>
                    {% endif %}
                </div>
                
                <!-- 用户类型和学校 -->
                <div class="form-row">
                    <div class="form-group">
                        <label for="user_type" class="form-label">用户类型</label>
                        {{ form.user_type(class="form-select", required=True) }}
                        {% if form.user_type.errors %}
                            <div class="text-danger mt-1">
                                {% for error in form.user_type.errors %}
                                    <small>{{ error }}</small>
                                {% endfor %}
                            </div>
                        {% endif %}
                    </div>
                    <div class="form-group">
                        <label for="school" class="form-label">所在学校</label>
                        {{ form.school(class="form-select", required=True) }}
                        {% if form.school.errors %}
                            <div class="text-danger mt-1">
                                {% for error in form.school.errors %}
                                    <small>{{ error }}</small>
                                {% endfor %}
                            </div>
                        {% endif %}
                    </div>
                </div>
                
                <!-- 同意条款 -->
                <div class="form-check">
                    {{ form.accept_tos(class="form-check-input", id="accept_tos", required=True) }}
                    <label for="accept_tos" class="form-check-label">
                        我已阅读并同意 <a href="#">《用户协议》</a> 和 <a href="#">《隐私政策》</a>
                    </label>
                    {% if form.accept_tos.errors %}
                        <div class="text-danger mt-1">
                            {% for error in form.accept_tos.errors %}
                                <small>{{ error }}</small>
                            {% endfor %}
                        </div>
                    {% endif %}
                </div>
                
                <!-- 注册按钮 -->
                <button type="submit" class="btn-register" id="register-button">
                    <span class="btn-text">注册</span>
                    <div class="loader" style="display: none;"></div>
                </button>
            </form>
            
            <div class="alternative-register">
                <p>或使用以下方式注册</p>
            </div>
            
            <div class="social-buttons">
                <button class="social-btn" id="wechat-register">
                    <i class="fa fa-weixin"></i>
                </button>
                <button class="social-btn" id="qq-register">
                    <i class="fa fa-qq"></i>
                </button>
                <button class="social-btn" id="school-register">
                    <i class="fa fa-university"></i>
                </button>
            </div>
            
            <div class="login-link">
                已有账号？ <a href="{{ url_for('login') }}" id="login-link">立即登录</a>
            </div>
        </div>
    </div>

    <!-- 引入Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 密码显示/隐藏切换
            const togglePassword = document.getElementById('toggle-password');
            const passwordInput = document.getElementById('password');
            
            togglePassword.addEventListener('click', function() {
                const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
                passwordInput.setAttribute('type', type);
                
                // 切换图标
                this.classList.toggle('fa-eye');
                this.classList.toggle('fa-eye-slash');
            });
            
            // 注册表单提交
            const registerForm = document.getElementById('register-form');
            const registerButton = document.getElementById('register-button');
            const errorMessage = document.getElementById('error-message');
            const successMessage = document.getElementById('success-message');
            
            registerForm.addEventListener('submit', function(e) {
                e.preventDefault();
                
                // 简单的表单验证
                const username = document.getElementById('username').value.trim();
                const email = document.getElementById('email').value.trim();
                const phone = document.getElementById('phone').value.trim();
                const password = passwordInput.value;
                const confirmPassword = document.getElementById('confirm_password').value;
                const agreeTerms = document.getElementById('accept_tos').checked;
                
                if (!username || !email || !phone || !password || !confirmPassword) {
                    showError('请填写所有必填字段');
                    return;
                }
                
                if (password !== confirmPassword) {
                    showError('两次输入的密码不一致');
                    return;
                }
                
                if (!agreeTerms) {
                    showError('请阅读并同意用户协议和隐私政策');
                    return;
                }
                
                // 显示加载状态
                registerButton.classList.add('loading');
                
                // 使用fetch API提交表单
                fetch("{{ url_for('register') }}", {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded',
                    },
                    body: new URLSearchParams(new FormData(registerForm))
                })
                .then(response => {
                    if (!response.ok) {
                        throw new Error('服务器响应错误');
                    }
                    return response.text();
                })
                .then(data => {
                    // 注册成功
                    showSuccess('注册成功！即将跳转到登录页面...');
                    
                    // 3秒后跳转到登录页面
                    setTimeout(function() {
                        window.location.href = "{{ url_for('login') }}";
                    }, 3000);
                })
                .catch(error => {
                    console.error('注册错误:', error);
                    // 注册失败，显示错误信息
                    showError('注册失败，请稍后再试或检查输入信息');
                    
                    // 重置加载状态
                    registerButton.classList.remove('loading');
                    
                    // 刷新验证码
                    refreshCaptcha();
                });
            });
            
            // 社交注册按钮点击事件
            const wechatRegister = document.getElementById('wechat-register');
            const qqRegister = document.getElementById('qq-register');
            const schoolRegister = document.getElementById('school-register');
            
            wechatRegister.addEventListener('click', function() {
                alert('即将跳转到微信授权页面！实际项目中会调用微信授权API');
            });
            
            qqRegister.addEventListener('click', function() {
                alert('即将跳转到QQ授权页面！实际项目中会调用QQ授权API');
            });
            
            schoolRegister.addEventListener('click', function() {
                alert('即将跳转到学校统一认证页面！实际项目中会跳转到学校SSO系统');
            });
            
            // 显示错误消息的函数
            function showError(message) {
                document.getElementById('error-text').textContent = message;
                errorMessage.style.display = 'flex';
                errorMessage.style.opacity = '1';
                errorMessage.style.transform = 'translateY(0)';
                
                // 添加抖动动画
                errorMessage.style.animation = 'none';
                errorMessage.offsetHeight; // 触发重排
                errorMessage.style.animation = 'shake 0.5s ease-in-out';
                
                // 5秒后自动隐藏错误消息
                setTimeout(function() {
                    errorMessage.style.opacity = '0';
                    errorMessage.style.transform = 'translateY(-10px)';
                    setTimeout(() => {
                        errorMessage.style.display = 'none';
                    }, 300);
                }, 5000);
            }
            
            // 显示成功消息的函数
            function showSuccess(message) {
                document.getElementById('success-text').textContent = message;
                successMessage.style.display = 'flex';
                successMessage.style.opacity = '1';
                successMessage.style.transform = 'translateY(0)';
            }
            
            // 添加输入框聚焦时隐藏错误消息
            const formInputs = document.querySelectorAll('input, select');
            formInputs.forEach(input => {
                input.addEventListener('focus', function() {
                    if (errorMessage.style.display === 'flex') {
                        errorMessage.style.opacity = '0';
                        errorMessage.style.transform = 'translateY(-10px)';
                        setTimeout(() => {
                            errorMessage.style.display = 'none';
                        }, 300);
                    }
                });
            });
            
            // 添加自定义抖动动画
            const style = document.createElement('style');
            style.textContent = `
                @keyframes shake {
                    0%, 100% { transform: translateX(0); }
                    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
                    20%, 40%, 60%, 80% { transform: translateX(5px); }
                }
            `;
            document.head.appendChild(style);
            
            // 密码强度检测
            const passwordStrength = document.getElementById('password-strength');
            const passwordStrengthBar = document.getElementById('password-strength-bar');
            const passwordStrengthText = document.getElementById('password-strength-text');
            
            passwordInput.addEventListener('input', function() {
                const password = this.value;
                
                if (password.length > 0) {
                    passwordStrength.classList.add('visible');
                    passwordStrengthText.classList.add('visible');
                    
                    // 简单的密码强度检测逻辑
                    let strength = 0;
                    
                    // 长度检测
                    if (password.length >= 8) strength += 1;
                    if (password.length >= 12) strength += 1;
                    
                    // 包含数字
                    if (/\d/.test(password)) strength += 1;
                    
                    // 包含小写字母
                    if (/[a-z]/.test(password)) strength += 1;
                    
                    // 包含大写字母
                    if (/[A-Z]/.test(password)) strength += 1;
                    
                    // 包含特殊字符
                    if (/[^A-Za-z0-9]/.test(password)) strength += 1;
                    
                    // 更新密码强度指示器
                    if (strength <= 2) {
                        passwordStrengthBar.className = 'password-strength-bar weak';
                        passwordStrengthText.className = 'password-strength-text visible weak';
                        passwordStrengthText.textContent = '密码强度: 弱';
                    } else if (strength <= 4) {
                        passwordStrengthBar.className = 'password-strength-bar medium';
                        passwordStrengthText.className = 'password-strength-text visible medium';
                        passwordStrengthText.textContent = '密码强度: 中';
                    } else {
                        passwordStrengthBar.className = 'password-strength-bar strong';
                        passwordStrengthText.className = 'password-strength-text visible strong';
                        passwordStrengthText.textContent = '密码强度: 强';
                    }
                } else {
                    passwordStrength.classList.remove('visible');
                    passwordStrengthText.classList.remove('visible');
                    passwordStrengthBar.className = 'password-strength-bar';
                    passwordStrengthBar.style.width = '0';
                }
            });
            
            // 刷新验证码
            const captchaImage = document.getElementById('captcha-image');
            const captchaRefresh = document.getElementById('captcha-refresh');
            
            function refreshCaptcha() {
                // 添加时间戳防止缓存
                const timestamp = new Date().getTime();
                captchaImage.src = "{{ url_for('captcha') }}?t=" + timestamp;
            }
            
            captchaImage.addEventListener('click', refreshCaptcha);
            captchaRefresh.addEventListener('click', refreshCaptcha);
            
            // 添加页面载入动画效果
            document.body.style.opacity = '0';
            setTimeout(function() {
                document.body.style.transition = 'opacity 0.5s ease';
                document.body.style.opacity = '1';
            }, 100);
        });
    </script>
</body>
</html>